<template>
  <el-dialog title="商品查询" :close-on-click-modal="false" :visible.sync="visible" top="-20px" fullscreen append-to-body center>
    <el-button class="miui-dialog-close-btn" @click="visible = false">关闭页面</el-button>
    <el-divider content-position="left">查询条件</el-divider>
    <div class="text item">
      <el-form inline size="mini">
        <el-form-item label="商品类别">
          <el-select v-model="dataForm.ctgId" :disabled="disabled">
            <el-option v-for="item in this.ctgList" :value="item.id" :label="item.name" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="制造商">
          <el-input v-model="dataForm.supplyName" :disabled="disabled">
            <el-button slot="append" @click="openDialog('supply')" :disabled="disabled">选择</el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="商品品种">
          <el-input v-model="dataForm.brandName" :disabled="disabled">
            <el-button slot="append" @click="openDialog('brand')" :disabled="disabled">选择</el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="商品代码">
          <el-input v-model="dataForm.code"></el-input>
        </el-form-item>
        <el-form-item label="商品条码">
          <el-input v-model="dataForm.barcode"></el-input>
        </el-form-item>
        <el-form-item label="商品名称">
          <el-input v-model="dataForm.viewGoodsName"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="getDataList()">查询</el-button>
          <el-button icon="el-icon-delete" type="info" @click="clearSearchForm">清空</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-divider content-position="left">查询数据</el-divider>

    <div class="avue-crud__pagination" style="margin-bottom: 25px;">
      <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" background layout="total, sizes, prev, pager, next">
      </el-pagination>
    </div>
    <el-table :data="dataList" height="calc(100vh - 215px)" ref="singleTable" border v-loading="dataListLoading">
      <el-table-column key="1" type="index" width="50">
        <template slot-scope="scope">
          <el-radio v-model="dataForm.goodsId" :label="scope.row.id" style="position: relative;left: 6px;top:-2px;" @change="checkGoods(scope.row)">&nbsp;</el-radio>
        </template>
      </el-table-column>
      <el-table-column key="2" prop="code" label="商品代码"></el-table-column>
      <el-table-column key="3" prop="viewGoodsName" label="商品名称"></el-table-column>
      <el-table-column key="4" prop="spec" label="型号" v-if="![3,4].includes(dataForm.ctgId)"></el-table-column>
      <el-table-column key="5" label="单位">
        <template slot-scope="scope">
          {{getValueByKey(unitTypeData,scope.row.unitType)}}
        </template>
      </el-table-column>
      <el-table-column key="6" prop="mirrorBall" label="老花镜度数" v-if="dataForm.ctgId == 8"></el-table-column>
      <el-table-column key="7" prop="manufacturerColorNumber" label="厂家色号" v-if="[1,6,8].includes(dataForm.ctgId)"></el-table-column>
      <el-table-column key="8" prop="frameMaterial" label="镜架材质" v-if="[1].includes(dataForm.ctgId)">
        <template slot-scope="scope">
          {{getValueByKey(frameMaterialData,scope.row.frameMaterial)}}
        </template>
      </el-table-column>
      <el-table-column key="9" prop="goodsSize" label="镜架尺寸" v-if="[1,6,8].includes(dataForm.ctgId)"></el-table-column>
      <el-table-column key="10" label="配件型" v-if="dataForm.ctgId == 2">
        <template slot-scope="scope">
          {{getValueByKey(accessoryTypeData,scope.row.accessoriesType)}}
        </template>
      </el-table-column>
      <!-- 镜片 -->
      <el-table-column key="11" prop="mirrorBall" label="球镜" v-if="[3,4].includes(dataForm.ctgId)"></el-table-column>
      <el-table-column key="12" prop="columnMirror" label="柱镜" v-if="[3,4].includes(dataForm.ctgId)"></el-table-column>
      <el-table-column key="13" prop="toTheLight" label="下加光" v-if="dataForm.ctgId == 3"></el-table-column>
      <el-table-column key="14" prop="refractiveIndex" label="折射率" v-if="dataForm.ctgId == 3"></el-table-column>
      <el-table-column key="15" label="镜片分类" v-if="dataForm.ctgId == 3">
        <template slot-scope="scope">
          {{getValueByKey(bizData.photometricClassification,scope.row.photometricClassification)}}
        </template>
      </el-table-column>
      <el-table-column key="16" label="材料分类" v-if="dataForm.ctgId == 3">
        <template slot-scope="scope">
          {{getValueByKey(bizData.lensMaterial,scope.row.lensMaterial)}}
        </template>
      </el-table-column>
      <el-table-column key="17" label="渐进片分类" v-if="dataForm.ctgId == 3">
        <template slot-scope="scope">
          {{getValueByKey(bizData.progressiveSliceClassification,scope.row.progressiveSliceClassification)}}
        </template>
      </el-table-column>
      <el-table-column key="18" label="镜片功能" v-if="dataForm.ctgId == 3">
        <template slot-scope="scope">
          {{getValueByKey(lensFunction,scope.row.lensFunction)}}
        </template>
      </el-table-column>
      <el-table-column key="19" prop="curvature" label="曲率" v-if="dataForm.ctgId == 4"></el-table-column>
      <el-table-column key="20" prop="diameter" label="直径" v-if="dataForm.ctgId == 4"></el-table-column>
      <el-table-column key="21" label="使用类型" v-if="dataForm.ctgId == 4">
        <template slot-scope="scope">
          {{getValueByKey(bizData.useType,scope.row.useType)}}
        </template>
      </el-table-column>
      <el-table-column key="22" label="抛弃类型" v-if="dataForm.ctgId == 4">
        <template slot-scope="scope">
          {{getValueByKey(bizData.disusedClassification,scope.row.disusedClassification)}}
        </template>
      </el-table-column>
      <el-table-column key="23" prop="primaryCapacity" label="主容量" v-if="dataForm.ctgId == 5"></el-table-column>
      <el-table-column key="24" prop="secondaryCapacity" label="次容量" v-if="dataForm.ctgId == 5"></el-table-column>


    </el-table>
    <search-supply v-if="supplyVisible" ref="supplyDialog" @refreshData="getSupplyId"></search-supply>
    <search-brand v-if="brandVisible" ref="brandDialog" @refreshData="getBrandId"></search-brand>
  </el-dialog>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { filterParams, uniqObjArrById } from '@/util/tools'
  import { remote } from '@/api/admin/dict'
  import { goodsFetchList } from '@/api/eims/goods'
  import { getCtgList } from '@/api/eims/ctg'

  import SearchSupply from '@/components/business/SearchSupply'
  import SearchBrand from '@/components/business/SearchBrand'
  export default {
    // props: ["ctgList"],
    data() {
      return {
        visible: false,
        disabled: false,
        formData: [],
        unitTypeData: [],
        frameMaterialData: [],
        lensFunction: [],
        accessoryTypeData: [],
        dataForm: {
          ctgId: '',
          supplyId: '',
          barcode: '',
          supplyName: '',
          brandId: '',
          brandName: '',
          spec: ''
        },
        ctgList: [],
        dataList: [],
        dataListLoading: false,
        multipleSelection: [],
        pageIndex: 1,
        pageSize: 100,
        totalPage: 0,
        supplyVisible: false,
        brandVisible: false
      }
    },
    components:{
      SearchSupply,
      SearchBrand
    },
    computed: {
      ...mapGetters(['bizData'])
    },
    methods: {
      init(data) {
        this.visible = true
        this.pageIndex = 1
        remote('unit_type').then(result => {
          this.unitTypeData = result.data.data
        })
        remote('frame_material').then(result => {
          this.frameMaterialData = result.data.data
        })
        remote('lens_function').then(result => {
          this.lensFunction = result.data.data
        })
        remote('accessory_type').then(result => {
          this.accessoryTypeData = result.data.data
        })
        this.formData = data.data
        this.dataForm = data.params
        this.disabled = data.disable
				if(data.disable) {
					this.disabled = true
				}
        this.getDataList()
        this.getGoodsCtgList()
      },
      //	清空查询表单
      clearSearchForm() {
        for (let key in this.dataForm) {
          if(key != 'ctgId' && key != 'supplyName' && key != 'supplyId' && key != 'brandName' && key != 'brandId'){
            this.dataForm[key] = ''
          }
        }
      },
      // 获取数据列表
      getDataList() {
				this.dataListLoading = true
        let params1 = { current: this.pageIndex, size: this.pageSize }
        let params2 = filterParams(this.dataForm)
        goodsFetchList(Object.assign(params1, params2)).then(response => {
          if(response.data.code == '0'){
            this.dataList = response.data.data.records
            this.totalPage = response.data.data.total
          }else{
            this.$message.error(response.data.msg)
          }
					this.dataListLoading = false
        })
      },
      // 每页数
      sizeChangeHandle(val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle(val) {
        this.pageIndex = val
        this.getDataList()
      },
      //  选择并关闭
      checkGoods(val) {
        this.visible = false
        this.$emit('updateForm', val)
      },
      getValueByKey(data,key) {
        let obj = {}
        obj = data.find(item => {
          return item.value == key
        })
        if(obj && obj.label){
          return obj.label
        }
      },
      //  获取商品列表
      getGoodsCtgList() {
        getCtgList().then(response => {
          if(response.data.code == '0'){
            this.ctgList = response.data.data
          }else{
            this.$message.error(response.data.msg)
          }
        })
      }
    }
  }
</script>

<style>
</style>
